<template>
  <div class="notify-page">
    <nav-bar title="消息提醒" border :leftArrow="!!user.token"></nav-bar>
    <div class="page-main" style="margin-top: 44px">
      <van-form input-align="right" :label-width="80">
        <van-field readonly label-class="van-cell__title_gray" v-model="notifyContent.name" label="消息标题" />
        <van-cell
          title-class="van-cell__title_gray"
          value-class="van-cell__value_orange"
          :value="notifyContent.keyLevelName"
          title="重要程度"
        />
        <van-field readonly label-class="van-cell__title_gray" label="消息内容" />
        <van-field
          readonly
          v-model="notifyContent.content"
          rows="5"
          autosize
          type="textarea"
          :border="false"
          input-align="left"
          class="van-field__value--textarea-lightgray"
        />
        <van-cell
          v-for="(item, index) in notifyContent.fileList"
          :key="index"
          title-class="van-cell__title_blue"
          :title="item.fileName"
          :icon="require('@/assets/images/basic/icon_link@2x.png')"
          @click="handleDownFile(item.filePath)"
        />
        <van-field readonly label-class="van-cell__title_gray" v-model="notifyContent.deliveryUser" label="发件人" />
        <van-field readonly label-class="van-cell__title_gray" v-model="notifyContent.deliveryTime" label="发件时间" />
      </van-form>
    </div>
    <!-- 视频预览 -->
    <gb-video :url="fileUrl" :show.sync="videoPopupShow"></gb-video>
    <!-- 图片预览 -->
    <van-image-preview v-model="imagePreviewShow" :showIndex="false" :images="[fileUrl]"></van-image-preview>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import My from '@/api/my'
export default {
  data() {
    return {
      notifyContent: {},
      videoSuffix: ['rmvb', 'wmv', 'mov', 'avi', 'mp4', 'bmp'],
      imageSuffix: ['jpg', 'png'],
      // 视频弹窗
      videoPopupShow: false,
      // 图片预览
      imagePreviewShow: false,
      fileUrl: ''
    }
  },
  computed: {
    ...mapState({
      user: state => state.userInfo
    })
  },
  beforeCreate() {
    document.title = '消息提醒'
    const metas = document.getElementsByTagName('meta')
    for (let i = 0; i < metas.length; i++) {
      if (metas[i].name === 'description') {
        metas[i].content = this.$route.query.name
        break
      }
    }
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    getDetail() {
      My.Notify.detail({
        code: this.$route.query.code
      }).then(res => {
        const { status, data } = res.data
        if (status === 0) {
          this.notifyContent = data
        }
      })
    },
    // 下载文件
    handleDownFile(url) {
      const urlArr = url.split('.')
      const suffix = urlArr[urlArr.length - 1]
      this.fileUrl = this.$config.ImageURl + url
      if (this.videoSuffix.includes(suffix)) {
        this.videoPopupShow = true
      } else if (this.imageSuffix.includes(suffix)) {
        this.imagePreviewShow = true
      } else {
        location.href = this.$config.ImageURl + url
      }
    }
  }
}
</script>
